<!doctype html>
<html>
  <head>
    <title>内联处理器示例</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <style>
      #app {
        font-family: 'Arial', sans-serif;
        background-color: #f5f5f5;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
      button {
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>计数器：{{ count }}</h2>
      <!-- 内联处理器 -->
      <button @click="count++">增加</button>
      <button @click="count--">减少</button>
      <button @click="count = 0">重置</button>

      <h3>用户信息</h3>
      <p>姓名：{{ user.name }}</p>
      <button @click="user.name = '张三'">设置姓名为张三</button>
      <button @click="user.name = '李四'">设置姓名为李四</button>
    </div>

    <script>
      const { createApp, ref, reactive } = Vue

      createApp({
        setup() {
          const count = ref(0)
          const user = reactive({
            name: '未设置'
          })

          return {
            count,
            user
          }
        }
      }).mount('#app')
    </script>
  </body>
</html>
